<template>
    <el-dialog v-model="show" title="坏账" width="30%" align-center @close="handleClose">
        <div class="container">
            <el-row>
                <el-col :span="12">
                    付款方名称：{{ props.initList.payer }}
                </el-col>
                <el-col :span="12">
                    款项来源：{{ props.initList.source == 0 ? '微定制订单' : props.initList.source == 1 ? '销售单' : '' }}
                </el-col>
                <el-col :span="12">
                    对账金额：￥{{ props.initList.reconciliationAmount }}
                </el-col>
                <el-col :span="12">
                    收款金额：￥{{ props.initList.collectedAmount }}
                </el-col>
                <el-col :span="12">
                    坏账金额：￥{{ props.initList.badDebt }}
                </el-col>
                <el-col :span="12">
                    欠款金额：￥{{ props.initList.pendingCollect }}
                </el-col>
                <el-col :span="12">
                    付款截止日期：{{ props.initList.endDate }}
                </el-col>
            </el-row>
            <el-divider />

            <el-row>
                <el-col :span="24" style="display: flex; align-items: center;">
                    坏账金额： <el-input style="width: 200px;" v-model.number="amount" />
                </el-col>
            </el-row>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { addBadDebtApi } from '@/api/sj/financialManagement/accountsReceivable/index';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const amount = ref(0);

const handleSubmit = async () => {

    if (!amount.value) return proxy?.$modal.msgError('请输入坏账金额');

    try {
        const { code } = await addBadDebtApi({
            id: props.initList.id,
            amount: amount.value
        });

        if (code === 200) {
            proxy?.$modal.msgSuccess('操作成功');
            emits('submit', true);

            handleClose();
        }
    } catch (error) {

    }
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    max-height: 300px;
    overflow-x: auto;
}

.el-col {
    margin-bottom: 10px;
    color: #000;
}
</style>